<template>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :pager-count="pager"
      @current-change="change"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "footerView",
  data() {
    return { pager: 7 };
  },
  props: {
    total: {
      default: 1,
      type: Number,
    },
    currentPage: {
      default: 1,
      type: Number,
    },
    pageSize: {
      default: 20,
      type: Number,
    },
  },
  mounted() {
    this.resizeHandler();
  },
  methods: {
    change(e) {
      this.$emit("handleCurrentChange", e);
    },
    resizeHandler() {
      if (window.innerWidth < 768) {
        this.pager = 4;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.pagination {
  padding: 40px 0 60px;
  display: flex;
  justify-content: center;
}
::v-deep.el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .btn-prev {
  background-color: #fff;
  min-width: 40px;
  border-radius: 2px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #eeeeee;
}
::v-deep .el-pagination {
  .el-pager {
    li {
      height: 40px;
      line-height: 40px;
      min-width: 40px;
      border-radius: 2px;
      background: #fff;
      border: 1px solid #eeeeee;
    }
    li:not(.disabled).active {
      border: 1px #f43c8a solid;
      color: #fff;
      background: #f43c8a;
    }
  }
}
@media screen and (max-width: 768px) {
  .pagination {
    padding: 20px 0 30px;
  }
  ::v-deep .el-pagination.is-background .btn-next,
  ::v-deep .el-pagination.is-background .btn-prev {
    min-width: 34px;
    height: 34px;
    line-height: 34px;
  }
  ::v-deep .el-pagination {
    .el-pager {
      li {
        height: 34px;
        line-height: 32px;
        min-width: 34px;
      }
    }
  }
}
</style>
